<template>
  <view class="scan-errore-tip">
    <PageLayout>
      <HeaderLayout show-back :header-style="headerStyle">
        <view>{{ $t('Pairing.ScanError.Navigator.ScanQRCode.Title') }}</view>
      </HeaderLayout>
      <view class="scan-errore-tip-body">
        <view class="error-type" v-for="item in errorData" v-show="errorCode == item.id">
          <view class="error-image">
            <image
              :src="'/pages/pairing/static/scanErrorTip/NoSuport.png'"
              v-if="item.id == 2"
              mode="aspectFit"
            ></image>
            <image
              :src="'/pages/pairing/static/scanErrorTip/ScanFail.png'"
              v-if="item.id == 3"
              mode="aspectFit"
            ></image>
          </view>
          <view class="error-tips">{{ item.tips }}</view>
        </view>
        <!-- <template #footer>
          <ActionButton>
            <view @click="toAuther">{{
              errorCode == 2
                ? $t('Pairing.ChooseMode.CheckOtherFeatures.Button.Text')
                : $t('Pairing.ChooseMode.ReserveQRCode.Button.Text')
            }}</view>
            <view class="code-link" @click="toScanError" v-if="errorCode == 3">
              {{ $t('Pairing.ChooseMode.NOFoundQRCode.Button.Text') }}
            </view>
          </ActionButton>
        </template> -->
        <viwe class="sub-group">
          <ActionButton>
            <view @click="toAuther">{{
              errorCode == 2
                ? $t('Pairing.ChooseMode.CheckOtherFeatures.Button.Text')
                : $t('Pairing.ChooseMode.ReserveQRCode.Button.Text')
            }}</view>
          </ActionButton>
          <view class="code-link" @click="toScanError" v-if="errorCode == 3">
            {{ $t('Pairing.ChooseMode.NOFoundQRCode.Button.Text') }}
          </view>
        </viwe>
      </view>
    </PageLayout>
  </view>
</template>
<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import { onLoad } from '@dcloudio/uni-app'
import i18n from '@/i18n'
import ActionButton from '@/common/actionButton/actionButton.vue'
import { template } from 'lodash'
const headerStyle = {
  backgroundColor: '#fff',
}
/**
 * errorcode: 2为有效二维码但家电不支持  3为无效二维码
 */
const errorCode = ref<string | number>(0)
onLoad((options) => {
  errorCode.value = options?.errorCode - 0
})
const errorData = [
  {
    id: 2,
    tips: i18n.global.t('Pairing.ScanErrorTip.NoSuportFeatures.Tip.Text'),
  },
  {
    id: 3,
    tips: i18n.global.t('Pairing.ScanErrorTip.FailScan.Tip.Text'),
  },
]
function toAuther() {
  if (errorCode.value == 2) {
    uni.redirectTo({
      url: '/pages/navigator/index/index',
    })
  } else {
    uni.navigateBack()
  }
}
function toScanError() {
  uni.redirectTo({ url: '/pages/pairing/scanErroreTip/scanApllianceTips' })
}
</script>
<style lang="less">
.scan-errore-tip {
  margin-top: 70rpx;
  .scan-errore-tip-body {
    width: 90%;
    margin: auto;
    .error-type {
      width: 100%;
      .error-image {
        margin: auto;
        margin-top: 47px;
        width: 362rpx;
        height: 376rpx;
        & > image {
          width: 100%;
        }
      }
      .error-tips {
        display: flex;
        justify-content: center;
        align-items: center;
        text-indent: 64rpx;
        color: #2c3846;
        font-weight: 500;
        font-size: 36rpx;
        margin-top: 112rpx;
        text-align: center;
      }
    }
    .sub-group {
      position: absolute;
      bottom: 18%;
      width: 90%;
      .submit-btn {
        // margin-top: 336rpx;

        height: 88rpx;
        background: var(--primary-petrol, #333);
        color: rgba(255, 255, 255, 1);

        display: flex;
        align-items: center;
        justify-content: center;
      }
      .code-link {
        color: var(--primary-blue-medium, #408df2);
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        text-decoration-line: underline;
        text-transform: capitalize;
        margin-top: 32rpx;
      }
    }
  }
}
</style>
